<template>
    <div class="detailContaner">
        <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>

        <!-- <norificationDetail :notificationDetail = "notificationDetail" />
        <reportDetail :reportDetail = "reportDetail" />
        <reportTable :id="$route.query.id" /> -->
        <component 
            :is="item" v-for= "(item, index) in componentsArray" :key = "index" 
            :notificationDetail = "notificationDetail" 
            :id = "$route.query.id" 
            :reportDetail = "reportDetail" 
            :hasReportDetail = "hasReportDetail" 
            :isOpen = "isOpen"
            @togglecards = "toggleCards"></component>
    </div>
</template>
<script>
export default {
    components: {
        Breadcrumb : () => import('@/components/IncorruptibleArchives/Breadcrumb.vue'),
        norificationDetail : () => import('./norificationDetail.vue'),
        reportDetail : () => import('./reportDetail.vue'),
        reportTable : () => import('./reportTable.vue'),
    },
    data() {
        return {
            // 面包屑导航数据
            Breadcrumb: [
                { name: "监督举报", link: "" },
                { name: "日常监督", link: "" },
                { name: "情况通报", link: "" },
                { name: "情况通报详情", link: "" },
                { name: "汇报详情", link: "" } 
            ],
            componentsArray: [],
            notificationDetail: {},
            reportDetail: {},
            hasReportDetail: false,
            isOpen: false,
        }
    },
    watch: {
        $route (newRoute) {
            this.$nextTick(() => {
                if (this.$route.query.comeFrom === 'NotificationTable') { // 情况通报（管理端）列表
                    this.getNotificationDetail(this.$route.query.id)
                } else if (this.$route.query.comeFrom === 'ReportTable') { // 情况通报汇报（上传端）列表
                    this.getNotificationReportUserDetail(this.$route.query.id)
                } else if (this.$route.query.comeFrom === 'DetailReportTable') { // 情况通报汇报详情列表（上传端）列表
                    this.getNotificationReportDetail(this.$route.query.id)
                    this.componentsArray = ['norificationDetail', 'reportDetail']
                } else if (this.$route.query.comeFrom === 'NeatenTable') { // 整理汇报列表

                }
            })
        }
    },
    props: {

    },
    created(){
        if(!this.$route.query.id || !this.$route.query.role || !this.$route.query.comeFrom) {
            this.$router.go('-1')
        }
    },
    mounted() {
       if (this.$route.query.comeFrom === 'NotificationTable') { // 情况通报（管理端）列表
            this.getNotificationDetail(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'ReportTable') { // 情况通报汇报（上传端）列表
            this.getNotificationReportUserDetail(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'DetailReportTable') { // 情况通报汇报详情列表（上传端）列表
            this.getNotificationReportDetail(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'NeatenTable') { // 整理汇报列表
            this.getRectifyDetail(this.$route.query.id)
        } else {
            this.$router.go('-1')
        }
    },
    methods: {
        // 情况通报详情和数据接口调用(管理端)
        getNotificationDetail(id) {
            let data = {
                id: id
            }
            this.Api.getNotificationDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.notificationDetail = res.data
                    this.componentsArray = ['norificationDetail', 'reportTable']
                } else {
                    this.notificationDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },
        // 情况通报详情和数据接口调用(上传端)
        getNotificationReportUserDetail(id) {
            let data = {
                id: id
            }
            this.Api.getNotificationReportUserDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.notificationDetail = res.data.notificationDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail) !== "{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['norificationDetail']
                } else {
                    this.notificationDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },
        // 情况通报汇报详情(详情列表)
        getNotificationReportDetail(id) {
            let data = {
                id: id
            }
            this.Api.getNotificationReportDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.notificationDetail = res.data.notificationDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail) !== "{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['norificationDetail']
                } else {
                    this.notificationDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },

        // 整改汇报详情
         getRectifyDetail(id) {
            let data = {
                id: id
            }
            this.Api.getRectifyDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.notificationDetail = res.data.notificationDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail)!=="{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['norificationDetail']
                } else {
                    this.notificationDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },
        // 收起和展开的切换
        toggleCards() {
            if (this.isOpen) {
                this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['norificationDetail']
            } else {
                this.componentsArray = ['norificationDetail', 'reportDetail']
            }
            this.isOpen = !this.isOpen
        }
    }
}
</script>
<style lang="less" scoped>
    .detailContaner{
        width: 100%;
		height: 100%;
    }
</style>